<template>
	<!-- 服务点心 -->
	<view class="master">
		<view class="place" :style="{background:newColor.color}"></view>
		<view class="user" :style="{background:newColor.color}">
			<!-- 头像 -->
			<view class="left"><image :src="userData.head_img" @tap="toSetting"></image></view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="username" >{{userData.username}}</view>
				<!-- <view class="signature">{{user.signature}}</view> -->
			</view>
			<view class="moneys">
				<view class="left">
					<p class="p1">¥{{userData.money}}</p>
					<p class="p2">实际余额</p>
				</view>
				<view class="right" @tap="jumpwithdrawal"><p>提现</p></view>
			</view>
			<view class="number">
				<view class="lefts">
					<p class="p1">{{masterData.order_num || 0}}</p>
					<p class="p2">当日订单</p>
				</view>
				<view class="center"></view>
				<view class="rights">
					<p class="p1">¥{{masterData.total_money || 0}}</p>
					<p class="p2">当日预计业绩</p>
				</view>
			</view>
		</view>
		<view class="order">
			<!-- 订单类型 -->
			<view class="list">
				<view class="box" v-for="(row, index) in orderList" :key="index" @tap="toOrderList(row)">
					<view class="img"><image :src="row.icon" mode=""></image></view>
					<view class="text">{{ row.text }}</view>
				</view>
			</view>
		</view>
		<p class="pk_title">业绩PK榜</p>
		<view class="tabs">
			<view :class="current == index ? 'active' : ''" v-for="(item, index) in tabList" :key="index" @tap="setTab(index)" :style="{background:current == index ?newColor.color:''}">{{ item.name }}</view>
		</view>
		<view class="paihang">
			<view style="overflow: hidden;" v-if="pkData.length !== 0">
				<p v-for="(item,index) in pkData" :key="index" class="lists">
					<image class="paiming_img" :src="imgList[index]" mode="" v-if="index < 3"></image>
					<text v-if="index >= 3" class="top_title">{{index + 1}}</text>
					<image class="hade_img" :src="item.head_img" mode=""></image>
					<text class="name">{{item.username}}</text>
					<text class="number">{{item.total_money}}元</text>
					<image src="../../static/image/jiangbei.png" mode="" class="jiangbei"></image>
				</p>
			</view>
			<view style="overflow: hidden;" v-else>
				<p style="text-align: center;margin-top: 20upx;color: #999;">暂无排行数据~</p>
			</view>
		</view>
		<p class="qiehuan" @tap="jumpPlace" :style="{color:newColor.color,borderColor:newColor.color}">
			切换到服务点中心
		</p>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import nodata from '../../../components/nodata/nodata.vue'
export default {
	components:{
		nodata
	},
	data() {
		return {
			orderList: [
				{ text: '商品推荐', icon: '../../static/image/tuijian.png',url:'/pagesA/pages/other/RecommendGoods' },
				{ text: '业绩查询', icon: '../../static/image/yeji.png' ,url:'/pagesA/pages/other/query'},
				{ text: '流水账单', icon: '../../static/image/zhangdan.png',url:'/pagesA/pages/other/bill' },
				{ text: '订单列表', icon: '../../static/image/dingdan.png',url:'/pagesA/pages/other/otherOrder' }
			],
			tabList: [{ name: '昨日排行', id: 1 }, { name: '周排行', id: 2 }, { name: '月排行', id: 3 }],
			current: 0,
			active:true,
			masterData:{},
			imgList:[
				'../../static/image/one.png',
				'../../static/image/two.png',
				'../../static/image/there.png'
			],
			dataList:[
				{name:'她家住在沙漠',number:250},
				{name:'她家住在沙漠',number:230},
				{name:'她家住在沙漠',number:200},
				{name:'她家住在沙漠',number:100},
			],
			mydata:{},
			userData:{},
			typeid:'',
			pkData: [],
			times:'day'
		};
	},
	onShow() {
		this.getMyinfo()
		this.getUserData()
		setTimeout(()=>{
			this.active = false
		},500)
	},
	methods:{
		setTab(index){
			this.current = index
			console.log(index)
			if(index == 0){
				this.times = 'day'
			}else if(index == 1){
				this.times = 'week'
			}else{
				this.times = 'month'
			}
			this.getPk()
		},
		jumpPlace() {
			if(this.userData.is_goods_point == 1){
				this.$Router.push({ path: '/pagesA/pages/other/place' });
			}else{
				uni.showToast({
					title:'您还不是服务点',
					icon:'none'
				})
			}
		},
		jumpwithdrawal(){
			this.$Router.push({ path: '/pagesA/pages/user/withdrawal' });
		},
		toOrderList(value){
			this.$Router.push({ path: value.url,query:{
				status: 2
			} });
		},
		getMyinfo(){
			this.request('user/getMyLeaderGoodsPoint',{
				type: 2
			}).then(res=>{
				console.log(res)
				this.mydata = res.data
				this.typeid = res.data[0].id
				console.log(this.typeid)
				this.getMaster()
				this.getPk()
			})
		},
		getUserData() {
			//获取个人信息
			this.request('user/getUserInfo', {}).then(res => {
				console.log(res);
				this.userData = res.data;
			});
		},
		getMaster(){
			this.request('fund/getLeaderGoodsPointOrderNumMoney',{
				type: 2,
				type_id: this.typeid
			}).then(res=>{
				console.log('服务点息',res)
				this.masterData = res.data
			})
		},
		getPk(){//获取pk榜
			this.request('fund/getLeaderGoodsPointOrderNumPK',{
				type: 2,
				time: this.times
			}).then(res=>{
				console.log(res)
				this.pkData = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.master{
		overflow: hidden;
		background-color: #FFFFFF;
	}
.place {
	background-color: #f23a3a;
	height: 50upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.user {
	width: 100%;
	padding: 0 4%;
	display: flex;
	align-items: center;
	// position: relative;
	background-color: #f23a3a;
	padding-bottom: 240upx;
	position: relative;
	.left {
		width: 16vw;
		height: 16vw;
		flex-shrink: 0;
		margin-right: 20upx;
		// border: solid 1upx #fff;
		border-radius: 100%;
		image {
			width: 16vw;
			height: 16vw;
			border-radius: 100%;
		}
	}
	.right {
		width: 35%;
		.username {
			font-size: 32upx;
			color: #fff;
		}
		.signature {
			color: #eee;
			font-size: 28upx;
		}
	}
	.moneys {
		display: flex;
		position: absolute;
		top: 30upx;
		right: 20upx;
		.left {
			text-align: center;
			border-radius: 0;
			margin-right: 20upx;
			min-width: 200upx;
			text-align: right;
			.p1 {
				font-size: 32upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.p2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			width: 130upx;
			height: 56upx;
			line-height: 56upx;
			border: 2upx solid rgba(255, 255, 255, 1);
			border-radius: 28upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
	.number {
		position: absolute;
		bottom: 80upx;
		left: 50%;
		transform: translateX(-50%);
		width: 60vw;
		overflow: hidden;
		padding-bottom: 20upx;
		.lefts {
			float: left;
			text-align: center;
			.p1 {
				font-size: 46upx;
				color: #ffffff;
			}
			.p2 {
				font-size: 24upx;
				color: #ffffff;
			}
		}
		.rights {
			float: right;
			text-align: center;
			.p1 {
				font-size: 46upx;
				color: #ffffff;
			}
			.p2 {
				font-size: 24upx;
				color: #ffffff;
			}
		}
		.center {
			width: 1upx;
			height: 40upx;
			background: rgba(255, 255, 255, 1);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.order {
	width: 84%;
	margin: 30upx 4% 30upx 4%;
	padding: 30upx 4% 20upx 4%;
	background-color: #fff;
	box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
	border-radius: 15upx;
	z-index: 100;
	position: absolute;
	top: 300upx;
	left: 50%;
	height: 140upx;
	transform: translateX(-55%);
	box-sizing: content-box;
	overflow: hidden;
	.all_order {
		font-size: 24upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text-align: right;
		transition: all 0.2s;
		image {
			width: 20upx;
			height: 25upx;
			transform: translateY(5upx);
			margin-left: 10upx;
		}
		&:active {
			transform: scaleY(1.2);
		}
	}
	.list {
		display: flex;
		padding-bottom: 10upx;
		margin-top: 20upx;
		.box {
			width: 25%;
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
				image {
					width: 40upx;
					height: 40upx;
					display: block;
				}
			}
			.text {
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 26upx;
				color: #1c1c1c;
				margin-top: 20upx;
			}
		}
	}
	.balance-info {
		display: flex;
		padding: 10upx 0;
		.left {
			width: 75%;
			display: flex;
			.box {
				width: 50%;
				font-size: 28upx;

				.num {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					color: #f9a453;
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					color: #3d3d3d;
					font-size: 28upx;
				}
			}
		}
		.right {
			border-left: solid 1upx #17e6a1;
			width: 25%;
			.box {
				.img {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					.icon {
						font-size: 45upx;
						color: #e78901;
					}
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}
	}
}
.pk_title {
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	margin-top: 150upx;
	padding: 0 30upx;
}
.tabs {
	padding: 0 30upx;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: space-between;
	margin-top: 20upx;
	>view {
		flex: 1;
		height: 70upx;
		line-height: 70upx;
		background: rgba(242, 242, 242, 1);
		color: #999999;
		text-align: center;
		min-width: 33%;
		max-width: 33%;
		font-size:28upx;
		transition: all 0.3s;
		&:first-child{
			border-top-left-radius: 38upx;
			border-bottom-left-radius: 38upx;
			overflow: hidden;
		}
		&:last-child{
			border-bottom-right-radius: 38upx;
			border-top-right-radius: 38upx;
			overflow: hidden;
		}
		&:active{
			transform: scaleX(0.93);
		}
	}
	.active{
		color: #FFFFFF;
		background-color: #F23A3A;
	}
	
}
.paihang{
	width:686upx;
	background:rgba(255,255,255,1);
	box-shadow:0px 0px 21upx 0px rgba(255,74,44,0.1);
	border-radius:20upx;
	margin: 0 auto;
	margin-top: 30upx;
	padding-bottom: 30upx;
	box-sizing: content-box;
	.lists{
		height: 80upx;
		line-height: 80upx;
		padding: 20upx 30upx;
		.paiming_img{
			width: 40upx;
			height: 60upx;
			float: left;
			margin-top: 10upx;
		}
		.top_title{
			font-size:28upx;
			font-family:Droid Sans Fallback;
			font-weight:400;
			color:rgba(51,51,51,1);
			float: left;
			width: 40upx;
			height: 60upx;
			text-align: center;
		}
		.hade_img{
			width: 70upx;
			height: 70upx;
			border-radius: 50%;
			float: left;
			margin-top: 5upx;
			margin-left: 30upx;
			margin-right: 20upx;
		}
		.name{
			font-size:28upx;
			font-family:Droid Sans Fallback;
			font-weight:400;
			color:rgba(51,51,51,1);
			float: left;
		}
		.number{
			font-size:28upx;
			font-family:Adobe Heiti Std;
			font-weight:normal;
			color:rgba(253,164,87,1);
			float: right;
		}
		.jiangbei{
			float: right;
			width: 33upx;
			height: 35upx;
			margin-top: 20upx;
			margin-right: 10upx;
		}
	}
}
.qiehuan{
	width:500upx;
	height:65upx;
	background:rgba(255,255,255,1);
	border:2upx solid rgba(242,58,58,1);
	border-radius:38upx;
	font-size:28upx;
	font-family:Droid Sans Fallback;
	font-weight:400;
	color:rgba(242,58,58,1);
	line-height:65upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 100upx;
	margin-bottom: 20upx;
	transition: all 0.3s;
	&:active{
		transform: scaleX(0.96);
	}
}
</style>
